import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import UUID from 'uuidjs';
import { DialogService } from 'ng-devui/modal';
import { select, Store } from '@ngrx/store';
import { AppState } from 'src/app/store';
import {
  addPersonListItem,
  changeStatus,
  deletePersonListItem,
} from 'src/app/store/actions/person.actions';
import { Observable } from 'rxjs';
import { State } from 'src/app/store/reducers/person.reducer';
import { personList } from 'src/app/store/selectors/person.selectors';
import { cloneDeep } from 'lodash';
@Component({
  selector: 'app-ngrx',
  templateUrl: './ngrx.component.html',
  styleUrls: ['./ngrx.component.less'],
})
export class NgrxComponent implements OnInit {
  constructor(
    private dialogService: DialogService,
    private store: Store<AppState>
  ) {
    this.store
      .pipe(select(personList))
      .subscribe(
        (personListNative) =>
          (this.personListNative = cloneDeep(personListNative))
      );
    this.personList = this.store.pipe(select(personList));
  }
  public value: string = '';
  @ViewChild('addName') addNameRef:
    | ElementRef<HTMLParagraphElement>
    | undefined;
  personList: Observable<State>;
  personListNative: State;

  /**
   * @description 添加人员
   * @returns
   */
  public addPersonListItem() {
    // console.log(this.value);
    if (!this.value) {
      const results = this.dialogService.open({
        id: 'dialog-service',
        width: '346px',
        maxHeight: '600px',
        title: '',
        content: '添加人员时，姓名不能为空!',
        backdropCloseable: false,
        dialogtype: 'failed',
        buttons: [
          {
            cssClass: 'primary',
            text: 'Ok',
            handler: ($event: Event) => {
              results.modalInstance.hide();
            },
          },
        ],
      });
      return;
    }
    this.store.dispatch(
      addPersonListItem({
        payload: {
          id: UUID.generate(),
          name: this.value,
          isChecked: false,
        },
      })
    );
    this.value = '';
    this.addNameRef.nativeElement.focus();
  }

  getSumListLength(): number {
    return this.personListNative.length;
  }
  getCheckedLength(): number {
    return this.personListNative.filter((ele) => ele.isChecked).length;
  }
  getNoCheckedLength(): number {
    return this.personListNative.filter((ele) => !ele.isChecked).length;
  }

  /**
   * @description 删除人员
   */
  public deletePersonListItem(id: string): void {
    console.log(id);
    const state = this.personListNative.filter((ele) => ele.id !== id);
    this.store.dispatch(
      deletePersonListItem({
        payload: state,
      })
    );
  }
  changeStatus(status: boolean, id: string) {
    console.log(status);
    console.log(id);
    const state = this.personListNative.map((ele) => {
      if (ele.id === id) {
        ele.isChecked = status;
      }
      return ele;
    });
    this.store.dispatch(
      changeStatus({
        payload: state,
      })
    );
  }
  ngOnInit(): void {}
}
